<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            @click="handleAdd"
        >导入
        </el-button>
        <el-button
            type="success"
            plain
            icon="el-icon-edit"
            :disabled="single"
            @click="handleUpdate"
        >修改
        </el-button>
        <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            :disabled="multiple"
            @click="handleDelete"
        >删除
        </el-button>
      </div>
      <div class="right-panel">
        <jcx-table-bar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></jcx-table-bar>
      </div>
    </el-header>

    <el-main>
      <el-form :model="queryParams" ref="queryForm" size="default" :inline="true" v-show="showSearch"
               label-width="108px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="表名称" prop="tableName">
              <el-input
                  v-model="queryParams.tableName"
                  placeholder="请输入表名称"
                  clearable
                  @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="备注" prop="remark">
              <el-input
                  v-model="queryParams.remark"
                  placeholder="请输入备注"
                  clearable
                  @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否成功" prop="status">
              <el-select v-model="queryParams.status" placeholder="请选择是否成功状态" clearable>
                <el-option key="1" label="成功" :value="true"/>
                <el-option key="0" label="失败" :value="false"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-table ref="table" v-loading="loading" :data="tableList" row-key="tableId"
                @selection-change="handleSelectionChange"
                :stripe="config.stripe" :border="config.border" :size="config.size" style="width: 100%">
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="表名称" align="center" prop="tableName" v-if="columns[0].visible"></el-table-column>
        <el-table-column label="表描述" align="center" prop="tableComment" v-if="columns[1].visible"></el-table-column>
        <el-table-column label="关联子表的表名" align="center" prop="subTableName" v-if="columns[2].visible"></el-table-column>
        <el-table-column label="子表关联的外键名" align="center" prop="subTableFkName"
                         v-if="columns[3].visible"></el-table-column>
        <el-table-column label="实体类名称" align="center" prop="className" v-if="columns[4].visible"></el-table-column>
        <el-table-column label="使用的模板分类ID" align="center" prop="templateCategoryId"
                         v-if="columns[5].visible"></el-table-column>
        <el-table-column label="生成包路径" align="center" prop="packageName" v-if="columns[6].visible"></el-table-column>
        <el-table-column label="生成模块名" align="center" prop="moduleName" v-if="columns[7].visible"></el-table-column>
        <el-table-column label="生成业务名" align="center" prop="businessName" v-if="columns[8].visible"></el-table-column>
        <el-table-column label="生成功能名" align="center" prop="functionName" v-if="columns[9].visible"></el-table-column>
        <el-table-column label="生成功能作者" align="center" prop="functionAuthor"
                         v-if="columns[10].visible"></el-table-column>
        <el-table-column label="生成代码方式" align="center" prop="generatorType" v-if="columns[11].visible">
          <template #default="scope">
            <el-tag v-if="scope.row.generatorType === '0'" type="success">zip压缩包</el-tag>
            <el-tag v-if="!scope.row.generatorType === '1'" type="danger">自定义路径</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="生成路径" align="center" prop="generatorPath" v-if="columns[12].visible"></el-table-column>
        <el-table-column label="其它生成选项" align="center" prop="options" v-if="columns[13].visible"></el-table-column>
        <el-table-column label="是否成功状态" align="center" prop="status" v-if="columns[14].visible">
          <template #default="scope">
            <el-tag v-if="scope.row.status" type="success">启用</el-tag>
            <el-tag v-if="!scope.row.status" type="danger">停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[15].visible"></el-table-column>
        <el-table-column label="备注" align="center" prop="remark" v-if="columns[16].visible"></el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="props">
            <el-button
                size="mini"
                type="text"
                icon="el-icon-plus"
                @click="handlePreview(props.row)"
            >预览
            </el-button>
            <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(props.row)"
            >修改
            </el-button>
            <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(props.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <jcx-page
          v-show="total>0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
      ></jcx-page>

      <el-dialog destroy-on-close append-to-body width="1000px" title="导入表结构" v-model="importOpen"
                 :close-on-click-modal="false" @closed="importCancel">

        <el-form :model="formQuery" ref="formQuery" size="default" :inline="true"
                 label-width="108px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="表名称" prop="tableName">
                <el-input
                    v-model="formQuery.tableName"
                    placeholder="请输入表名称"
                    clearable
                    @keyup.enter.native="handleFormQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="表描述" prop="tableComment">
                <el-input
                    v-model="formQuery.tableComment"
                    placeholder="请输入备注"
                    clearable
                    @keyup.enter.native="handleFormQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleFormQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetFormQuery">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <el-table ref="formTable" v-loading="formLoading" :data="tableInfoList" row-key="tableId"
                  @selection-change="formHandleSelectionChange"
                  :stripe="config.stripe" :border="config.border" :size="config.size" style="width: 100%">
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="表名称" align="center" prop="tableName"></el-table-column>
          <el-table-column label="表描述" align="center" prop="tableComment"></el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime"></el-table-column>
          <el-table-column label="更新时间" align="center" prop="updateTime"></el-table-column>
        </el-table>

        <jcx-page
            v-show="formTotal>0"
            :total="formTotal"
            v-model:page="formQuery.pageNum"
            v-model:limit="formQuery.pageSize"
            @pagination="getFormList"
        ></jcx-page>

        <template #footer>
          <el-button type="primary" :loading="saveing" @click="handleImport">确 定</el-button>
          <el-button @click="importCancel">取 消</el-button>
        </template>
      </el-dialog>

      <el-dialog destroy-on-close append-to-body width="95%" title="修改表结构" v-model="editOpen"
                 :close-on-click-modal="false" @closed="editCancel">
        <el-tabs type="border-card" v-model="tabs" @tab-click="handleClick">
          <el-tab-pane name="basic" label="基本信息">
            <el-form v-show="basicShow" ref="form" :model="form" :rules="rules" label-width="100px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="表名称" prop="tableName">
                    <el-input v-model="form.tableName" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="表描述" prop="tableComment">
                    <el-input v-model="form.tableComment" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="实体类名称" prop="className">
                    <el-input v-model="form.className" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="作者" prop="functionAuthor">
                    <el-input v-model="form.functionAuthor" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" clearable type="textarea"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane name="info" label="生成信息">
            <el-form v-show="infoShow" ref="form" :model="form" :rules="rules" label-width="150px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="生成模板" prop="tplCategory">
                    <el-select v-model="form.templateCategoryId" @change="templateCategoryIdChange">
                      <el-option :key="item.categoryId" :label="item.categoryName" :value="item.categoryId"
                                 v-for="item in categoryList"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="生成包路径" prop="packageName">
                    <el-input v-model="form.packageName" clearable></el-input>
                    <div class="el-form-item-msg">生成在哪个java包下，例如 com.jichangxiu</div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="生成模块名" prop="moduleName">
                    <el-input v-model="form.moduleName" clearable></el-input>
                    <div class="el-form-item-msg">可理解为子系统名，例如 system</div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="生成业务名" prop="businessName">
                    <el-input v-model="form.businessName" clearable></el-input>
                    <div class="el-form-item-msg">可理解为功能英文名，例如 user</div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="生成功能名" prop="functionName">
                    <el-input v-model="form.functionName" clearable></el-input>
                    <div class="el-form-item-msg">用作类描述，例如 用户</div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="生成代码方式" prop="generatorType">
                    <el-radio v-model="form.generatorType" label="0">zip压缩包</el-radio>
                    <el-radio v-model="form.generatorType" label="1">自定义路径</el-radio>
                    <div class="el-form-item-msg">默认为zip压缩包下载，也可以自定义生成路径</div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="form.generatorType === '1'">
                <el-col :span="24">
                  <el-form-item label="自定义路径" prop="generatorPath">
                    <el-input v-model="form.generatorPath"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="上级菜单" prop="parentMenuId">
                    <div class="treeMain" style="width: 100%;">
                      <el-tree
                          show-checkbox
                          class="tree-border"
                          ref="menu"
                          node-key="menuId"
                          :data="menuList"
                          :props="menuProps"
                          :check-strictly="!menuCheckStrictly"
                          empty-text="加载中，请稍候"
                          @check="checkFn"
                      ></el-tree>
                    </div>
                    <div class="el-form-item-msg">分配到指定菜单下，例如 系统管理</div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane name="column" label="字段信息">
            <el-table v-show="columnShow" ref="columnTable" :data="columnList" row-key="columnId">
              <el-table-column label="序号" align="center" type="index" min-width="5%"
                               class-name="allowDrag"></el-table-column>
              <el-table-column label="字段列名" align="center" prop="columnName" min-width="10%"
                               :show-overflow-tooltip="true"></el-table-column>
              <el-table-column label="字段描述" align="center" min-width="10%">
                <template #default="scope">
                  <el-input v-model="scope.row.columnComment"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="物理类型" align="center" prop="columnType" min-width="10%"
                               :show-overflow-tooltip="true"></el-table-column>
              <el-table-column label="Java类型" align="center" min-width="11%">
                <template #default="scope">
                  <el-select v-model="scope.row.javaType">
                    <el-option label="Long" value="Long"/>
                    <el-option label="String" value="String"/>
                    <el-option label="Integer" value="Integer"/>
                    <el-option label="Double" value="Double"/>
                    <el-option label="BigDecimal" value="BigDecimal"/>
                    <el-option label="Date" value="Date"/>
                    <el-option label="Boolean" value="Boolean"/>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="java属性" align="center" min-width="10%">
                <template #default="scope">
                  <el-input v-model="scope.row.javaField"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="插入" align="center" min-width="5%">
                <template #default="scope">
                  <el-checkbox :true-label="true" :false-label="false" v-model="scope.row.isInsert"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column label="编辑" align="center" min-width="5%">
                <template #default="scope">
                  <el-checkbox :true-label="true" :false-label="false" v-model="scope.row.isEdit"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column label="列表" align="center" min-width="5%">
                <template #default="scope">
                  <el-checkbox :true-label="true" :false-label="false" v-model="scope.row.isList"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column label="查询" align="center" min-width="5%">
                <template #default="scope">
                  <el-checkbox :true-label="true" :false-label="false" v-model="scope.row.isQuery"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column label="查询方式" align="center" min-width="10%">
                <template #default="scope">
                  <el-select v-model="scope.row.queryType">
                    <el-option label="=" value="EQ"/>
                    <el-option label="!=" value="NE"/>
                    <el-option label=">" value="GT"/>
                    <el-option label=">=" value="GTE"/>
                    <el-option label="<" value="LT"/>
                    <el-option label="<=" value="LTE"/>
                    <el-option label="LIKE" value="LIKE"/>
                    <el-option label="BETWEEN" value="BETWEEN"/>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="是否必填" align="center" min-width="5%">
                <template #default="scope">
                  <el-checkbox :true-label="true" :false-label="false" v-model="scope.row.isRequired"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column label="显示类型" align="center" min-width="12%">
                <template #default="scope">
                  <el-select v-model="scope.row.htmlType">
                    <el-option label="文本框" value="input"/>
                    <el-option label="文本域" value="textarea"/>
                    <el-option label="下拉框" value="select"/>
                    <el-option label="按钮" value="switch"/>
                    <el-option label="单选框" value="radio"/>
                    <el-option label="复选框" value="checkbox"/>
                    <el-option label="日期控件" value="datetime"/>
                    <el-option label="图片上传" value="imageUpload"/>
                    <el-option label="文件上传" value="fileUpload"/>
                    <el-option label="富文本控件" value="editor"/>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="字典类型" align="center" min-width="12%">
                <template #default="scope">
                  <el-select v-model="scope.row.dictId" clearable filterable placeholder="请选择">
                    <el-option
                        v-for="dict in dictOptions"
                        :key="dict.dictType"
                        :label="dict.dictName"
                        :value="dict.dictType">
                      <span style="float: left">{{ dict.dictName }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <template #footer>
          <el-button type="primary" :loading="editIng" @click="handleEdit">确 定</el-button>
          <el-button @click="editCancel">取 消</el-button>
        </template>
      </el-dialog>

      <!-- 预览界面 -->
      <el-dialog destroy-on-close append-to-body width="95%" :title="preview.title" v-model="preview.open"
                 class="scrollbar" @closed="previewCancel">
        <el-tabs v-model="preview.activeName">
          <el-tab-pane
              v-for="(value, key) in preview.data"
              :label="key"
              :name="key"
              :key="key">
            <jcx-code-editor id="editor" ref="editor" style="width: 100%" v-model="preview.data[key]"
                             mode="text/x-java"
                             theme="darcula"></jcx-code-editor>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>

export default {
  name: "Table",
  data() {
    return {
      // 遮罩层
      loading: true,
      formLoading: true,
      saveing: false,
      editIng: false,
      // 选中数组
      ids: [],
      formSelectTableNames: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 列表数据
      tableList: [],
      tableInfoList: [],
      categoryList: [],
      menuList: [],
      columnList: [],
      // 是否显示弹出层
      importOpen: false,
      editOpen: false,
      // 分页总条数
      total: 0,
      formTotal: 0,
      // 查询参数
      queryParams: {
        tableName: undefined,
        remark: undefined,
        status: undefined,
        pageNum: 1,
        pageSize: 10
      },
      formQuery: {
        tableName: undefined,
        tableComment: undefined,
        startTime: undefined,
        endTime: undefined,
        pageNum: 1,
        pageSize: 5
      },
      // 父子联动
      menuCheckStrictly: false,
      menuProps: {
        label: (data) => {
          return data.meta.title
        }
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      // 表格配置
      config: {
        // 表格大小
        size: "default",
        // 表格边框
        border: true,
        // 表格斑马图纹
        stripe: true
      },
      columns: [
        {key: 0, label: `表名称`, visible: true},
        {key: 1, label: `表描述`, visible: true},
        {key: 2, label: `关联子表的表名`, visible: false},
        {key: 3, label: `子表关联的外键名`, visible: false},
        {key: 4, label: `实体类名称`, visible: true},
        {key: 5, label: `使用的模板分类ID`, visible: false},
        {key: 6, label: `生成包路径`, visible: false},
        {key: 7, label: `生成模块名`, visible: false},
        {key: 8, label: `生成业务名`, visible: false},
        {key: 9, label: `生成功能名`, visible: false},
        {key: 10, label: `生成功能作者`, visible: false},
        {key: 11, label: `生成代码方式`, visible: true},
        {key: 12, label: `生成路径`, visible: false},
        {key: 13, label: `其它生成选项`, visible: false},
        {key: 14, label: `是否成功状态`, visible: true},
        {key: 15, label: `创建时间`, visible: false},
        {key: 16, label: `备注`, visible: false},
      ],
      tabs: 'basic',
      basicShow: true,
      infoShow: false,
      columnShow: false,
      // 预览参数
      preview: {
        open: false,
        title: "代码预览",
        data: {},
        activeName: "JAVA_ACTION"
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleClick(node) {
      this.basicShow = false;
      this.infoShow = false;
      this.columnShow = false;
      this[node.props.name + 'Show'] = true;
      if (node.props.name === 'info') {
        let currKey = this.form.parentMenuId;
        this.$nextTick(() => {
          if (this.$refs['menu']) {
            this.$refs.menu.setCheckedKeys([currKey]);
          }
        });
      }
    },
    checkFn(node, data) {
      let currKey = node.menuId;
      this.$nextTick(() => {
        if (this.$refs['menu']) {
          this.$refs.menu.setCheckedKeys([currKey]);
        }
      });
    },
    /** 查询部门列表 */
    getList() {
      this.loading = true;

      if (this.categoryList && this.categoryList.length === 0) {
        this.$API.category.pageListCategory.get({
          status: true
        }).then(response => {
          if (response.status) {
            this.categoryList = response.data.records;
          } else {
            this.$message.warning(response.msg);
          }
        });
      }

      if (this.menuList && this.menuList.length === 0) {
        this.$API.menu.pageListMenu.get({
          status: true,
          metaType: "directory"
        }).then(response => {
          if (response.status) {
            this.menuList = response.data.records;
          } else {
            this.$message.warning(response.msg);
          }
        });
      }

      this.$API.table.pageListTable.get(this.queryParams).then(response => {
        if (response.status) {
          this.tableList = response.data.records;
          this.total = response.data.total
          this.loading = false;
        } else {
          this.$message.warning(response.msg);
        }
      });
    },
    getFormList() {
      this.formLoading = true;
      this.$API.table.getTableListInDs.get(this.formQuery).then(response => {
        if (response.status) {
          this.tableInfoList = response.data.records;
          this.formTotal = response.data.total;
          this.formLoading = false;
        } else {
          this.$message.warning(response.msg);
        }
      });
    },
    // 取消按钮
    importCancel() {
      this.importOpen = false;
    },
    editCancel() {
      this.editOpen = false;
      this.tabs = 'basic';
      this.basicShow = true;
      this.infoShow = false;
      this.columnShow = false;
    },
    // 表单重置
    reset() {
      this.formSelectTableNames = [];
      this.form = {
        tableId: "",
        tableName: "",
        tableComment: "",
        subTableName: "",
        subTableFkName: "",
        className: "",
        templateCategoryId: "",
        packageName: "",
        moduleName: "",
        businessName: "",
        functionName: "",
        functionAuthor: "",
        generatorType: "",
        generatorPath: "",
        parentMenuId: "",
        options: "",
        status: true,
        remark: ""
      };
      this.$nextTick(() => {
        if (this.$refs['form']) {
          this.$refs['form'].clearValidate();
          this.$refs['form'].resetFields();
        }
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    handleFormQuery() {
      this.getFormList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$nextTick(() => {
        if (this.$refs['queryForm']) {
          this.$refs['queryForm'].resetFields();
        }
      });
      this.handleQuery();
    },
    resetFormQuery() {
      this.$nextTick(() => {
        if (this.$refs['formQuery']) {
          this.$refs['formQuery'].resetFields();
        }
      });
      this.handleFormQuery();
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.tableId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    formHandleSelectionChange(selection) {
      this.formSelectTableNames = selection.map(item => item.tableName);
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.getFormList();
      this.importOpen = true;
    },
    templateCategoryIdChange() {

    },
    previewCancel() {
      this.preview.activeName = 'JAVA_ACTION';
      this.preview.open = false;
      this.preview.data = {};
    },
    handlePreview(row) {
      this.$API.table.preview.get(row.tableId).then(response => {
        if (response.status) {
          this.preview.data = response.data
          this.preview.open = true;
        } else {
          this.$message.warning(response.msg);
        }
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const tableId = row.tableId || this.ids
      this.$API.table.getTableById.get(tableId).then(response => {
        if (response.status) {
          this.form = response.data;
          this.columnList = this.form.toolGeneratorTableColumnQueryDtoList;
          this.editOpen = true;
        } else {
          this.$message.warning(response.msg);
        }
      });
    },
    handleEdit() {
      this.$nextTick(() => {
        if (this.$refs['menu']) {
          this.form.parentMenuId = this.$refs.menu.getCheckedKeys()[0];
          this.$API.table.editTable.put(this.form).then(response => {
            if (response.status) {
              this.$message.success(response.msg);
              this.editIng = false;
              this.editOpen = false;
              this.getList();
            } else {
              this.$alert(response.msg, "提示", {type: 'error'});
              this.editIng = false;
            }
          });
        }
      });
    },
    handleImport() {
      this.saveing = true;
      this.$API.table.importByTableNames.post(this.formSelectTableNames).then(response => {
        if (response.status) {
          this.$message.success(response.msg);
          this.saveing = false;
          this.importOpen = false;
          this.getList();
        } else {
          this.$alert(response.msg, "提示", {type: 'error'});
          this.saveing = false;
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const tableIds = row.tableId ? [row.tableId] : this.ids;
      this.$confirm(`确定删除选中的 ${tableIds.length} 项吗？`, '提示', {
        type: 'warning'
      }).then(() => {
        this.$API.table.delTable.delete(tableIds).then(response => {
          if (response.status) {
            this.$message.success(response.msg);
            this.getList();
          } else {
            this.$alert(response.msg, "提示", {type: 'error'});
          }
        });
      })
    }
  }
};
</script>

<style scoped>
.treeMain {
  height: 280px;
  overflow: auto;
  border: 1px solid #dcdfe6;
  margin-bottom: 10px;
}
</style>
